<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>video</title>

    <!--封装好的视频布局样式-->
    <link rel="stylesheet" type="text/css" href="css/jsmodern.min.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <!--mp4视频插件-->
    <script type="text/javascript" src="js/jsmodern.min.js"></script>
    <script type="text/javascript" src="js/Vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

    <style>
        #video {
            width: 970px;
            height: 520px;
            margin: 0 auto;
            position: relative;
        }
        
        #video video {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
        
        .VideoBtn {
            position: absolute;
            left: 50%;
            top: 50%;
            display: block;
            width: 70px;
            height: 70px;
            margin-left: -35px;
            margin-top: -35px;
            cursor: pointer;
            z-index: 10;
        }
    </style>

    <!--视频插件调用方法-->
    <script>
        $(function() {
            //视频
            jsModern.video("#video");
            //播放视频
            $(".VideoBtn").click(function() {
                    var video = document.getElementById("videoShow");
                    video.play();
                    $('.VideoBtn').hide();
                })
                //监听视频的播放状态
            var video = document.getElementById("videoShow");
            video.oncanplay = function() {
                    $(".VideoBtn").show();
                    //$("#video").attr("poster","");
                }
                //视频播放事件
            video.onplay = function() {
                $("#videoShow").attr("poster", "");
                $(".VideoBtn").hide();
            };
            video.onplaying = function() {
                $(".VideoBtn").hide();
            };

            //视频暂停事件
            video.onpause = function() {
                $(".VideoBtn").show();
            };
            //点击视频周围暂停播放图片出现
            video.onclick = function() {
                if (video.paused) {
                    $(".VideoBtn").hide();
                    video.play();
                } else {
                    $(".VideoBtn").show();
                    video.pause();
                }
            };
        })
    </script>
</head>

<body>

    <div id="video">
        <div id="abc">
            <video v-bind:src="pathUrl" id="videoShow"></video>
            <span class="VideoBtn"><img src="img/bo1.png"></span>
        </div>
    </div>

    <script type="text/javascript">
        var id = window.location.href.split("=")[1]; //截取字符串
        var cwname;
        new Vue({
            el: "#abc",
            data() {
                return {
                    pathUrl: ""
                };
            },
            mounted() {
                let data = {
                    "cwid": id
                }
                axios.post(
                    "/courseware/findCoursewareByCwid", data, {
                        headers: {}
                    }).then(res => {
                    if (res.data.code == 500) {
                        location.href = "/error/500.html";
                    }
                    if (res.data.code == 200) {
                        console.log(res.data.data);
                        cwname = res.data.data.cwname;
                        this.pathUrl = "http://117.51.156.132:8080/testUpload_war/file/" + cwname + ".mp4"
                    }
                })
            }
        })
    </script>

</body>

</html>